<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>推理加速优化配置</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#6B7280'
},
borderRadius: {
'none': '0px',
'sm': '4px',
DEFAULT: '8px',
'md': '12px',
'lg': '16px',
'xl': '20px',
'2xl': '24px',
'3xl': '32px',
'full': '9999px',
'button': '8px'
}
}
}
}
</script>
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
.custom-switch {
position: relative;
width: 44px;
height: 24px;
}
.custom-switch input {
opacity: 0;
width: 0;
height: 0;
}
.custom-switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e5e7eb;
transition: .3s;
border-radius: 24px;
}
.custom-switch .slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .3s;
border-radius: 50%;
}
.custom-switch input:checked + .slider {
background-color: #3B82F6;
}
.custom-switch input:checked + .slider:before {
transform: translateX(20px);
}
.custom-range {
-webkit-appearance: none;
appearance: none;
height: 6px;
border-radius: 3px;
background: #e5e7eb;
outline: none;
}
.custom-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3B82F6;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.custom-range::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #3B82F6;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.custom-radio {
position: relative;
display: inline-block;
}
.custom-radio input {
opacity: 0;
position: absolute;
}
.custom-radio .radio-mark {
width: 20px;
height: 20px;
border: 2px solid #d1d5db;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.custom-radio input:checked + .radio-mark {
border-color: #3B82F6;
background-color: #3B82F6;
}
.custom-radio input:checked + .radio-mark:after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background-color: white;
}
</style>
</head>
<body class="bg-gray-50">
<div class="min-h-screen flex">
<aside class="w-64 bg-white border-r border-gray-200 fixed h-full">
<div class="p-6 border-b border-gray-200">
<a href="#" class="text-xl font-['Pacifico'] text-gray-900">logo</a>
</div>
<nav class="p-4">
<div class="space-y-4">
<div>
<div class="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-gray-600">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-file-list-2-line"></i>
</div>
<span>模型管理</span>
<div class="flex-1"></div>
<i class="ri-arrow-down-s-line"></i>
</div>
<div class="mt-1 ml-7 space-y-1">
<a href="#" class="block px-3 py-2 text-sm text-gray-600 hover:text-primary">模型生命周期</a>
<a href="#" class="block px-3 py-2 text-sm text-gray-600 hover:text-primary">模型应用场景</a>
<a href="#" class="block px-3 py-2 text-sm text-gray-600 hover:text-primary">模型权限管理</a>
</div>
</div>
<div>
<a href="#" class="flex items-center space-x-2 px-3 py-2 text-sm font-medium rounded-lg bg-primary bg-opacity-10 text-primary">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-rocket-line"></i>
</div>
<span>推理加速</span>
</a>
</div>
<div>
<div class="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-gray-600">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-api-line"></i>
</div>
<span>API 接口</span>
<div class="flex-1"></div>
<i class="ri-arrow-down-s-line"></i>
</div>
</div>
<div>
<div class="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-gray-600">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-settings-line"></i>
</div>
<span>系统设置</span>
<div class="flex-1"></div>
<i class="ri-arrow-down-s-line"></i>
</div>
</div>
</div>
</nav>
</aside>
<div class="flex-1 ml-64">
<header class="bg-white border-b border-gray-200">
<div class="px-6 py-4 flex items-center justify-between">
<div class="flex items-center space-x-4">
<a href="" data-readdy="true" class="flex items-center text-gray-600 hover:text-gray-900 transition-colors">
<div class="w-8 h-8 flex items-center justify-center">
<i class="ri-arrow-left-line text-lg"></i>
</div>
</a>
<h1 class="text-xl font-semibold text-gray-900">推理加速优化配置</h1>
</div>
<div class="flex items-center space-x-3">
<button class="px-4 py-2 text-gray-600 border border-gray-300 rounded-button hover:bg-gray-50 transition-colors whitespace-nowrap !rounded-button">
重置配置
</button>
<button class="px-4 py-2 bg-primary text-white rounded-button hover:bg-blue-600 transition-colors whitespace-nowrap !rounded-button">
保存配置
</button>
</div>
</div>
</header>
<main class="p-6">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-cpu-line text-blue-600"></i>
</div>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900">模型量化设置</h3>
<p class="text-sm text-gray-500">减少模型精度以提升推理速度</p>
</div>
</div>
<label class="custom-switch">
<input type="checkbox" id="quantization-toggle" checked>
<span class="slider"></span>
</label>
</div>
</div>
<div class="p-6">
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">精度级别</label>
<div class="space-y-3">
<label class="flex items-center space-x-3 cursor-pointer">
<div class="custom-radio">
<input type="radio" name="precision" value="fp16">
<div class="radio-mark"></div>
</div>
<div class="flex-1">
<div class="text-sm font-medium text-gray-900">FP16 半精度</div>
<div class="text-xs text-gray-500">推荐选择，平衡性能与精度</div>
</div>
<div class="text-xs text-green-600 font-medium">+1.8x</div>
</label>
<label class="flex items-center space-x-3 cursor-pointer">
<div class="custom-radio">
<input type="radio" name="precision" value="int8" checked>
<div class="radio-mark"></div>
</div>
<div class="flex-1">
<div class="text-sm font-medium text-gray-900">INT8 整数量化</div>
<div class="text-xs text-gray-500">显著提升速度，轻微精度损失</div>
</div>
<div class="text-xs text-green-600 font-medium">+3.2x</div>
</label>
<label class="flex items-center space-x-3 cursor-pointer">
<div class="custom-radio">
<input type="radio" name="precision" value="int4">
<div class="radio-mark"></div>
</div>
<div class="flex-1">
<div class="text-sm font-medium text-gray-900">INT4 极限量化</div>
<div class="text-xs text-gray-500">最大速度提升，需要评估精度</div>
</div>
<div class="text-xs text-green-600 font-medium">+5.1x</div>
</label>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<span class="text-sm font-medium text-gray-700">预估模型大小</span>
<span class="text-sm text-gray-900">2.3 GB</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 35%"></div>
</div>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>原始: 6.5 GB</span>
<span>压缩率: 65%</span>
</div>
</div>
<div class="bg-amber-50 border border-amber-200 rounded-lg p-3">
<div class="flex items-start space-x-2">
<div class="w-4 h-4 flex items-center justify-center mt-0.5">
<i class="ri-information-line text-amber-600 text-sm"></i>
</div>
<div class="text-sm text-amber-800">
<div class="font-medium">性能影响提示</div>
<div class="mt-1">INT8 量化可能在复杂场景下产生 2-5% 的精度损失，建议先进行测试验证。</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-links-line text-green-600"></i>
</div>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900">算子融合配置</h3>
<p class="text-sm text-gray-500">优化计算图以减少内存访问</p>
</div>
</div>
<label class="custom-switch">
<input type="checkbox" id="fusion-toggle" checked>
<span class="slider"></span>
</label>
</div>
</div>
<div class="p-6">
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">融合策略</label>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div class="flex items-center space-x-3">
<input type="checkbox" class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary" checked>
<div>
<div class="text-sm font-medium text-gray-900">卷积 + 批归一化</div>
<div class="text-xs text-gray-500">Conv2D + BatchNorm 融合</div>
</div>
</div>
<span class="text-xs text-green-600 font-medium">+15%</span>
</div>
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div class="flex items-center space-x-3">
<input type="checkbox" class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary" checked>
<div>
<div class="text-sm font-medium text-gray-900">激活函数融合</div>
<div class="text-xs text-gray-500">ReLU, GELU 等激活函数</div>
</div>
</div>
<span class="text-xs text-green-600 font-medium">+8%</span>
</div>
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div class="flex items-center space-x-3">
<input type="checkbox" class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
<div>
<div class="text-sm font-medium text-gray-900">多头注意力融合</div>
<div class="text-xs text-gray-500">Transformer 注意力机制</div>
</div>
</div>
<span class="text-xs text-orange-600 font-medium">实验性</span>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="flex items-center justify-between mb-3">
<span class="text-sm font-medium text-gray-700">预期性能提升</span>
<span class="text-lg font-semibold text-green-600">+23%</span>
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div>
<div class="text-gray-500">融合算子数</div>
<div class="font-medium">127 / 138</div>
</div>
<div>
<div class="text-gray-500">优化覆盖率</div>
<div class="font-medium">92%</div>
</div>
</div>
</div>
<div class="bg-red-50 border border-red-200 rounded-lg p-3">
<div class="flex items-start space-x-2">
<div class="w-4 h-4 flex items-center justify-center mt-0.5">
<i class="ri-error-warning-line text-red-600 text-sm"></i>
</div>
<div class="text-sm text-red-800">
<div class="font-medium">风险等级: 低</div>
<div class="mt-1">算子融合通常是安全的优化，但在特定硬件上可能需要额外验证。</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-database-2-line text-purple-600"></i>
</div>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900">内存优化设置</h3>
<p class="text-sm text-gray-500">调整内存分配策略</p>
</div>
</div>
<label class="custom-switch">
<input type="checkbox" id="memory-toggle" checked>
<span class="slider"></span>
</label>
</div>
</div>
<div class="p-6">
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">缓存大小 (GB)</label>
<div class="space-y-3">
<input type="range" class="custom-range w-full" min="1" max="16" value="8" id="cache-size">
<div class="flex justify-between text-sm text-gray-500">
<span>1 GB</span>
<span class="font-medium text-gray-900">8 GB</span>
<span>16 GB</span>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">内存池策略</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">
<option>自适应分配</option>
<option>预分配固定大小</option>
<option>动态扩展</option>
</select>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-sm font-medium text-gray-700 mb-3">当前内存使用情况</div>
<div class="space-y-2">
<div class="flex justify-between text-sm">
<span class="text-gray-600">GPU 显存</span>
<span class="text-gray-900">6.2 GB / 12 GB</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 52%"></div>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-600">系统内存</span>
<span class="text-gray-900">12.8 GB / 32 GB</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 40%"></div>
</div>
</div>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
<div class="flex items-start space-x-2">
<div class="w-4 h-4 flex items-center justify-center mt-0.5">
<i class="ri-lightbulb-line text-blue-600 text-sm"></i>
</div>
<div class="text-sm text-blue-800">
<div class="font-medium">建议配置</div>
<div class="mt-1">基于当前模型大小，建议设置缓存为 6-10 GB 以获得最佳性能表现。</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-8 bg-white rounded-xl shadow-sm border border-gray-200 p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">优化效果预览</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="text-center">
<div class="text-2xl font-bold text-green-600 mb-1">3.2x</div>
<div class="text-sm text-gray-600">推理速度提升</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-blue-600 mb-1">-45%</div>
<div class="text-sm text-gray-600">内存占用减少</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-purple-600 mb-1">28ms</div>
<div class="text-sm text-gray-600">平均延迟</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-orange-600 mb-1">99.2%</div>
<div class="text-sm text-gray-600">预期精度保持</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script id="switch-controls">
document.addEventListener('DOMContentLoaded', function() {
const switches = document.querySelectorAll('.custom-switch input');
switches.forEach(switch_ => {
switch_.addEventListener('change', function() {
const card = this.closest('.bg-white');
const content = card.querySelector('.p-6:last-child');
if (content) {
content.style.opacity = this.checked ? '1' : '0.5';
content.style.pointerEvents = this.checked ? 'auto' : 'none';
}
});
});
});
</script>
<script id="range-slider">
document.addEventListener('DOMContentLoaded', function() {
const cacheSlider = document.getElementById('cache-size');
if (cacheSlider) {
cacheSlider.addEventListener('input', function() {
const value = this.value;
const display = this.parentElement.querySelector('.font-medium');
if (display) {
display.textContent = value + ' GB';
}
});
}
});
</script>
<script id="radio-controls">
document.addEventListener('DOMContentLoaded', function() {
const radioInputs = document.querySelectorAll('input[type="radio"]');
radioInputs.forEach(radio => {
radio.addEventListener('change', function() {
if (this.name === 'precision') {
const speedBoosts = {
'fp16': '+1.8x',
'int8': '+3.2x',
'int4': '+5.1x'
};
const modelSizes = {
'fp16': { size: '3.2 GB', width: '49%' },
'int8': { size: '2.3 GB', width: '35%' },
'int4': { size: '1.6 GB', width: '25%' }
};
const sizeInfo = modelSizes[this.value];
const sizeDisplay = document.querySelector('.bg-gray-50 .text-gray-900');
const progressBar = document.querySelector('.bg-blue-500');
if (sizeDisplay && progressBar && sizeInfo) {
sizeDisplay.textContent = sizeInfo.size;
progressBar.style.width = sizeInfo.width;
}
}
});
});
});
</script>
</body>
</html>